<template>
  <div class="food-chart"
       element-loading-text="正在加载中...">
    <div class="chart-container card-item">
      <div class="content">
        <span class="title">📊记录统计</span>
      </div>
      <div class="chart" ref="foodDailyChartRef"/>
    </div>
    <div class="chart-container card-item">
      <div class="content">
        <span class="title">📊菜谱统计</span>
      </div>
      <div class="chart" ref="foodCategoryChartRef"/>
    </div>
    <div class="chart-container card-item">
      <div class="content">
        <span class="title">📊排行榜</span>
      </div>
      <div class="chart rank-chart">
        <food-rank v-if="foodStore.rankStats.length > 0"/>
        <el-empty v-else description="暂无数据"/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import FoodRank from '@/components/Stats/FoodRank.vue'
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { lineChartOptions, pieChartOptions } from 'vue3-common/utils/eChartsUtil'
import { useFoodStore } from '@/store/food'
import { useAppStore } from '@/store/app.ts'

const foodStore = useFoodStore()
const appStore = useAppStore()

const foodDailyChartRef = ref<HTMLElement>()
const foodCategoryChartRef = ref<HTMLElement>()

let foodDailyChart: echarts.ECharts
let foodCategoryChart: echarts.ECharts

watch(() => foodStore.isRefresh, () => {
  updateChart()
})

onMounted(() => {
  foodDailyChart = echarts.init(foodDailyChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
  foodCategoryChart = echarts.init(foodCategoryChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
})

const updateChart = () => {
  const MAX_COUNT = 5

  // 记录统计图
  const dailyXAxis = foodStore.recordStats.slice(0, MAX_COUNT).map((item) => item.name)
  const dailyYAxis = foodStore.recordStats.slice(0, MAX_COUNT).map((item) => item.value)
  foodDailyChart.setOption(lineChartOptions('日期', dailyXAxis, '次数（次）', dailyYAxis))

  // 类别统计图
  const foodCategoryData = foodStore.categoryStats.slice(0, MAX_COUNT)
  foodCategoryChart.setOption(pieChartOptions('category', '个', foodCategoryData))
}
</script>

<style lang="scss">
.food-chart {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;

  .chart-container {
    display: grid;
    grid-template-rows: 40px 1fr;

    .content {
      padding: 0 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--el-color-primary);

      .title {
        font-size: 1em;
        font-weight: bold;
      }
    }

    .chart {
      height: 300px;
      width: 100%;
    }

    .rank-chart {
      overflow: auto;
      display: flex;
      flex-direction: column;
      gap: 5px;

      .rank-item {
        padding: 10px;
        display: grid;
        grid-template-columns: 20px 1fr 80px;
        align-items: center;

        .rank-amount {
          justify-self: flex-end;
        }
      }

      .rank-item:nth-child(1) {
        color: #d4af37;
        font-weight: bold;
      }

      .rank-item:nth-child(2) {
        color: #a8a8a8;
      }

      .rank-item:nth-child(3) {
        color: #b87333;
      }
    }
  }
}
</style>
